<template>
  <div class="box" >
    <h3>Header</h3>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<!-- 
  如果想要让style中的样式只针对当前组件内的模板生效,则只需要在style元素上添加scoped属性即可
  原理:
    * 一旦书写scoped属性,就会给当前组件的模板每一个元素添加一个 组件内统一的且组件之间唯一的自定义属性
    * 给style中的选择器也添加了属性名选择器
    * 未来项目打包好以后,当前的样式因为有属性名选择器的限制,则只能控制当前组件中的模板样式
  注意,每个组件的最外层元素上不但有自己组件scoped属性添加的自定义属性,也会有父组件的scoped添加的自定义属性
 -->
<style scoped>
.box {
  width: 100px;
  height: 100px;
  background: yellowgreen;
}
</style>
